<script setup lang='ts'>
import type { PlusColumn, PlusFormGroupRow } from 'plus-pro-components'

import { SearchForm } from '@fl/components'
import { Editor } from '@fl/origin-components/Editor/index'

const state = ref(
    {
        a1: 'a1',
        a2: 'a2',
        a3: 'a3',
        a4: 'a4',
        a5: 'a5',
        a6: '<p>谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打谢谢额是打&nbsp;</p>',
    },
)

const columns: PlusFormGroupRow[] = [
    {
        columns: [
            {
                label: '商品类目',
                prop: 'a1',
                valueType: 'text',
            },
            {
                label: '组合商品名称',
                prop: 'a2',
                valueType: 'text',
            },
            {
                hasLabel: false,
                label: 'hide',
                prop: 'hide',
                valueType: 'text',
            },
            {
                label: '门窗尺寸',
                prop: 'a3',
                valueType: 'text',
            },
            {
                label: '扣减尺寸',
                prop: 'a4',
                valueType: 'text',
            },
            {
                label: '洞口面积',
                prop: 'a5',
                valueType: 'text',
            },
        ],
        title: '工程概况',
    },
    {
        columns: [
            {
                colProps: {
                    span: 24,
                },
                hasLabel: false,
                label: '商品类目',
                prop: 'a6',
                valueType: 'text',
            },
        ],
        title: '保租房项目证明',
    },
]
</script>

<template>
    <SearchForm v-model="state"
                :group="columns"
                label-position="top"
                :has-footer="false"
                :row-props="{ gutter: 20 }"
    >
        <template #plus-field-hide />

        <template #plus-field-a6>
            <div v-html="state.a6" />
        </template>
    </SearchForm>
</template>

<style lang="scss" scoped>
:deep(.plus-form__group__item__icon) {
    font-weight: bold;
    font-size: 16px;
}
</style>
